<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-01-06 18:49:47
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-12 16:21:30
 * @FilePath: /BLOG/src/components/common/LoadingMore.vue
-->
<template>
  <div class="bottom-loading">
    <img v-if="loading && length != 0" style="width: 36px; height: 36px" src="@/assets/images/common/loading.svg" alt="" srcset="" />
    <div v-if="!loading && hasMore && length != 0" :style="{ padding: isMobi ? '0px 60px' : '0px 80px' }" class="btn-more pointer" @click="handleLoadMore">
      {{ btnText }}
    </div>
    <div v-if="!hasMore && !loading && length != 0" class="no-more">很高兴你翻到这里，但是真的没有了...</div>
  </div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';

const { isMobi } = useResize();

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  length: {
    type: Number,
    default: 0
  },
  hasMore: {
    type: Boolean,
    default: false
  },
  btnText: {
    type: String,
    default: '更多...'
  }
});

const emits = defineEmits(['loadMore']);

const handleLoadMore = () => {
  emits('loadMore');
};
</script>

<style scoped lang="scss">
.bottom-loading {
  height: 76px;
  padding: 20px 10px;
  .btn-more {
    padding: 10px 20px;
    border-radius: 36px;
    height: 36px;
    line-height: 36px;
    background-color: var(--theme-light-color-9);
    color: var(--theme-color);
    border: 1px solid var(--theme-light-color-5);
  }
  .no-more {
    line-height: 36px;
    color: var(--theme-light-color-3);
  }
}
</style>
